<template>
  <!-- svg：图标外层容器节点，内部需要与use标签结合使用 -->
  <svg :style="{ width: props.size, height: props.size }">
    <!-- xlink:`href执行用哪一个图标`，属性值务必#`icon-图标名字` -->
    <!-- use标签fill属性可以设置图标的颜色 -->
    <use :xlink:href="formatName" :fill="props.color"></use>
  </svg>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue'
// svgicon图标组件封装

const props = defineProps({
  // svg图标名字
  name: {
    type: String,
    default: '',
  },
  // svg图标颜色
  color: {
    type: String,
    default: '',
  },
  // 宽高
  size: {
    type: String,
    default: '32px',
  },
})

// 对svgicon名字进行格式化
const formatName = computed(() => {
  return `#icon-${props.name}`
})
</script>

<style lang="scss" scoped></style>
